<template>
	<view class="">
		<uni-nav-bar left-icon="back" title="设置主题" color="#FFFFFF" :background-color="themeColor.color" @clickLeft="back"
		 status-bar="true">
		</uni-nav-bar>
		<div class="list_box">
			<view class="list_box">
				<view class=" list_box_list">
					<view class="themeLists_list_box" :class="'bg-' + themeColor.name"><text>{{themeColor.title}}</text> </view>
				</view>
			</view>

		</div>


		<div class="themeLists_box">
			<view class="themeLists_list" v-for="(list , index) in themeLists" :key="index" @click="setthemeBg(list)">
				<view class="themeLists_list_box" :class="'bg-' + list.name"> </view>
				<text>{{list.title}}</text>
			</view>
		</div>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				themeLists: []
			}
		},
		onLoad() {
			this.themeLists = this.$constData.themeList
		},
		methods: {
			setthemeBg(list) {
				list = JSON.parse(JSON.stringify(list))
				this.themeColor = list;
				this.$store.commit('setThemeColor', list);
				uni.setNavigationBarColor({
					backgroundColor: "#0081FF"
				})
			},
			back() {
				uni.navigateBack()
			}
		},


	}
</script>

<style>
	.themeLists_box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: end;
	}

	.themeLists_list {
		width: 100rpx;
		display: flex;
		padding: 10rpx;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.themeLists_list_box {
		width: 100%;
		height: 100rpx;
	}

	.list_box_list .themeLists_list_box {
		line-height: 100rpx;
		color: #FFFFFF;
		font-size: 38rpx;
		text-align: center;
	}
</style>
